<template>
	<view class="invite">
		
		<view style="width: 100%; height: 100%; position: relative;">
			<image style="width: 130vw; height: 600rpx; position: absolute; top: -150rpx;" :src="imgUrl +'share_bg.png'"></image>
			<view style="width: calc(100% - 100rpx); height: 600rpx; margin: 0rpx 50rpx; background-color: #FFFFFF; position: absolute; top: 380rpx; border:2rpx solid rgba(198, 194, 193, 0.56);border-radius:20rpx;">
				<view style="width: 100%; height: 100rpx; color: #ffffff;  display: flex; justify-content: center; align-items: center;">
					<view style="background:rgba(164,0,0,1); border-radius:10px; width:176rpx; height:62rpx; display: flex; justify-content: center; align-items: center; margin-right: 120rpx;">我可获得</view>
					<view style="background:rgba(164,0,0,1); border-radius:10px; width:176rpx; height:62rpx; display: flex; justify-content: center; align-items: center;">好友可得</view>
				</view>
				<view style="width: 100%; height: 300rpx; display: flex; justify-content: center; align-items: center;">
					<image :src="imgUrl +'yqxr.png'" style="width: 40%; margin-right: 30rpx;" mode="aspectFit"></image>
					<image :src="imgUrl +'xrzx.png'" style="width: 40%;" mode="aspectFit"></image>
				</view>
				<view style="width: 100%; height: 160rpx; display: flex; justify-content: center; align-items: center; margin-top: 30rpx; font-size: 20rpx;">
					<view  style="width: 40%; height: 160rpx; display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin-right: 30rpx;">
						<image style="width: 100rpx; height: 100rpx;" :src="imgUrl +'wx.png'"></image>
						<button style="background:linear-gradient(-3deg,rgba(255,162,0,1),rgba(237,107,26,1)); padding: 0rpx; font-size: 20rpx;
							display: flex; justify-content: center; align-items: center; width:160rpx; height:40rpx; border-radius:15rpx; color: #fff;" open-type="share">邀请微信好友</button>
						<!-- <button open-type="share" style="background:linear-gradient(-3deg,rgba(255,162,0,1),rgba(237,107,26,1)); 
							display: flex; justify-content: center; align-items: center; width:160rpx; height:40rpx; border-radius:15rpx; color: #fff;"
							>邀请微信好友</button> -->
					</view>
					<view style="width: 40%; height: 160rpx; display: flex; justify-content: space-between; align-items: center; flex-direction: column;">
						<image style="width: 100rpx; height: 100rpx;" :src="imgUrl+'pyq.png'"></image>
						<view @click="createQRCode" style="background:linear-gradient(-3deg,rgba(255,162,0,1),rgba(237,107,26,1)); display: flex; justify-content: center; align-items: center; width:160rpx; height:40rpx; border-radius:15rpx; color: #fff;">分享朋友圈</view>
					</view>
				</view>
			</view>
			<view style="width: calc(100% - 100rpx); height: 600rpx; margin: 20rpx 50rpx; background-color: #FFFFFF; position: absolute; top: 980rpx; border:2rpx solid rgba(198, 194, 193, 0.56);border-radius:20rpx;">
				<view style="width: 100%; height: 100rpx; display: flex; justify-content: center; align-items: center;">
					<view style="width: 100rpx; border:1rpx dashed; height: 2rpx;"></view>
					<view style="width: 200rpx; height: 100%; display: flex; justify-content: center; align-items: center;">活动规则</view>
					<view style="width: 100rpx; border:1rpx dashed; height: 2rpx;"></view>
				</view>
				<view style="width: 100%; display: flex; justify-content: center; align-items: center;">
					<image :src="imgUrl +'remarks.png'" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<view class="bg-white" style="height: 500rpx;">
					<image @longtap="downloadImg()" :src="qrCode" mode="aspectFit" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="modalName=null">关闭</view>
				</view>
			</view>
		</view>
		<!-- 获取手机号弹窗 -->
		<!-- <view v-if="showQRCodeFlag" class="sureBox shadow flex-center">
			<view style="position: relative;">
				<view class="tipBox flex-column">
					<image @longtap="downloadImg()" :src="qrCode" mode="aspectFit" style="width: 100%; height: 100%;"></image>
				</view>
				<image @click="showQRCodeFlag = false" class="close" src="../../../static/cool/close.png" mode="widthFix"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {getQrCode} from '@/api/api.js'
	export default {
		data() {
			return {
				kazUserInfo: {},
				showQRCodeFlag: false,
				qrCode: '',
				imgUrl: 'https://hotelfiles.oss-cn-zhangjiakou.aliyuncs.com/miniapp/static/',
				modalName:null
			}
		},
		onLoad() {
			var kazUserInfo = uni.getStorageSync('kazUserInfo');
			// console.log(kazUserInfo)
			if(kazUserInfo){
				this.kazUserInfo = kazUserInfo;
			}
		},
		onShareAppMessage(res) {
		    return {
		      title: '科爱住酒店',
		      path: '/pages/tabbar/index/index?scene='+uni.userInfo.id
		    }
		},
		methods: {
			async createQRCode(){
				uni.showLoading({
					title: '加载中'
				});
				uni.hideLoading();
				getQrCode().then(res=>{
					if(res.code==200){
						uni.hideLoading();
						this.qrCode = 'data:image/png;base64,'+res.data;
						this.modalName = "Image";
					}
				})
			},
			downloadImg(e){
				uni.showLoading({
					mask:true,
					title:"保存中..."
				})
				let img = this.qrCode;
				var aa = wx.getFileSystemManager();
				aa.writeFile({
					filePath:wx.env.USER_DATA_PATH+'/test.png',
					data: img.slice(22),
					encoding:'base64',
					success:res=>{
						wx.saveImageToPhotosAlbum({
							filePath: wx.env.USER_DATA_PATH + '/test.png',
							  success: function (res) {
								wx.showToast({
								  title: '保存成功',
								})
								uni.hideLoading();
							  },
							  fail: function (err) {
								console.log(err)
								uni.hideLoading();
								uni.showToast({
									title:"保存失败",
									icon:"none"
								})
							  }
						})
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title:"保存失败",
							icon:"none"
						})
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FFFFFF;
	}
	.invite{
		.inviteCon{
			width:100%;
			padding:40rpx;
			padding-bottom:150rpx;
			padding-top:370rpx;
			box-sizing: border-box;
			background-image:url();
			background-size:100%;
			background-position:100% 0%;
			background-repeat: no-repeat;
			.boxList{
				width:100%;
				height:auto;
				background:#fff;
				border-radius:10rpx;
				padding:60rpx 40rpx;
				box-sizing: border-box;
				margin-top:30rpx;
				.giftBox{
					.giftList{
						width:50%;
						display:flex;
						flex-direction: column;
						justify-content: center;
						align-items:center;
						.topTitle{
							// width:90%;
							.bagTitle{
								padding:0 20rpx;
								box-sizing: border-box;
							}
							.line{
								width:40rpx;
								height:2rpx;
								// background:$themeColor;
							}
						}
						.giftBg{
							width:220rpx;
							height:290rpx;
							// background-image:url(~@/static/mine/giftBag.png);
							background-size:100%;
							background-position:center;
							background-repeat: no-repeat;
							margin-top:52rpx;
							p{
								width:150rpx;
								// border:1rpx solid #ddd;
								text-align:center;
								margin:auto;
							}
							.p1{
								font-size:71rpx;
								color:#E41919;
								margin-top:50rpx;
								span{
									font-size:33rpx;
								}
							}
							.p2{
								font-size:40rpx;
								color:#fff;
								margin-top:56rpx;
							}
						}
					}
				}
				.my-btn{
					width:100%;
					margin-top:70rpx;
				}
			}
			.boxListTwo{
				.topTitle{
					.title{
						padding:0 30rpx;
						box-sizing: border-box;
					}
					.line{
						width:120rpx;
						height:2rpx;
						// background:$themeColor;
					}
				}
			}
			.myGiftBox{
				.awardBox{
					margin-top:80rpx;
					.awardList{
						width:50%;
						padding:0 30rpx;
						box-sizing: border-box;
						display:flex;
						flex-direction:column;
						justify-content:center;
						align-items:center;
						.top{
							font-size:56rpx;
						}
						.bottom{
							color:#999;
						}
					}
					.awardList:nth-child(2){
						border-left:2rpx solid #ddd;
						border-right:2rpx solid #ddd;
					}
				}
				.more{
					margin-top:40rpx;
					image{
						width:12rpx;
						height:22rpx;
						margin-left:20rpx;
					}
				}
			}
			.intergralBox{
				.intergralList{
					margin-top:70rpx;
					.intergralItem{
						width:33.33%;
						display:flex;
						flex-direction:column;
						justify-content:center;
						align-items:center;
						image{
							width:140rpx;
							height:140rpx;
							border-radius:50%;
							margin-bottom:10rpx;
						}
					}
				}
			}
			.textBox{
				margin-top:50rpx;
				p{
					line-height:48rpx;
				}
			}
			.boxList:first-child{
				margin-top:0rpx;
			}
		}
		.intBtnBox{
			width:100%;
			height:130rpx;
			background:#fff;
			position:fixed;
			left:0;
			bottom:0;
			padding:0 40rpx;
			box-sizing: border-box;
			.my-btn{
				width:100%;
				margin:0;
			}
		}
		
		.sureBox {
			background: rgba(0, 0, 0, 0.7);
			.tipBox {
				// position: fixed;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50%,-50%);
				text-align: center;
				padding: 40rpx 40rpx;
				box-sizing: border-box;
				width: 670rpx;
				height: 670rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 6rpx;
			}
			.close {
				width: 70rpx;
				height: 70rpx;
				display: block;
				margin: 0 auto;
				margin-top: 72rpx;
			}
		}
	}
</style>
